import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
    FLOW_CONTROL_1,
    FLOW_CONTROL_2,
    FLOW_CONTROL_3,
    FLOW_CONTROL_4,
    FLOW_CONTROL_5,
    FLOW_CONTROL_6,
    FLOW_CONTROL_7
} from "./AppConst";


/**
 * React JSX
 *   React 使用 JSX 来替代常规的 JavaScript。
 *   JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
 * 
 *   我们不需要一定使用 JSX，但它有以下优点：

        JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
        它是类型安全的，在编译过程中就能发现错误。
        使用 JSX 编写模板更加简单快速。
        @date 2020-11-21
 */


// JSX 示例
/**
 * 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
   它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
   JSX 是在 JavaScript 内部实现的。
   我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
   与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
 */
const element = <h1>Hello,world!</h1>;



function sampleJsx() {
    var myDivElement = <div className="foo" ><h1>Hello,Sample JSX</h1></div>
    return myDivElement
}

/**
 * 高级jsx
 *  嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，
 *  添加自定义属性需要使用 data- 前缀。
 */
function sampleHighJsx() {
    var element =
        <div>
            <h1>菜鸟教程</h1>
            <h2>欢迎学习 React</h2>
            <p data-myattribute="somevalue">这是一个很不错的JavaScript库!</p>
        </div>
    return element
}

/**
 * JavaScript 表达式
 */
function sampleJsExpression() {
    console.log("sampleJsExpression run...");
    var element =
        <div>
            <h1>{1 + 1}</h1>
        </div>
    /**
     * 不要直接返回
     *     <div>
             <h1>{1 + 1}</h1>
           </div>
        程序执行会出现问题   
          可以使用(<div></div>) 进行返回
     */
    return element
}


/**
 * 高级js表达式
 */
function sampleHighJsxExpression() {
    var i = 0
    // 在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代
    // var element =
    //     <div>
    //         <h1>{i == 1 ? 'True' : 'False'}</h1>
    //     </div>
    return (
        <div>
            <h1>{i == 1 ? 'True' : 'False'}</h1>
        </div>
    );
}


/**
 * 带style样式的jsx
 *   React 会在指定元素数字后自动添加 px
 */
function sampleJsxWithStyle() {
    // React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式.
    var myStyle = {
        fontSize: 100,
        color: '#FF0000'
    };
    var element = <h1 style={myStyle}>菜鸟教程</h1>
    return element
}

/**
 * jsx注释
 */
function sampleJsxExegesis() {
    var element =
        <div>
            <h1>菜鸟教程</h1>
            {
                /* 
                这里是jsx的注释
                发送Http get请求连接服务器
                获取服务器的图片URL列表
                将图片展示在列表控件上 */
            }
        </div>
    return element
}

/**
 * jsx 数组
 */
function sampleJsxArray() {
    var arr = [
        <h1>菜鸟教程</h1>,
        <h2>学的不仅是技术，更是梦想！</h2>
    ]
    return arr
}

/**
 * 构建jsx对象
 * @param {状态标记} flag 
 */
function buildJsxObj(flag) {
    console.log("buildJsxObj flag = " + flag);
    // todo 这里尽量要写成常量，不要使用这种数字
    if (flag == FLOW_CONTROL_1) {
        return sampleJsx()
    } else if (flag == FLOW_CONTROL_2) {
        return sampleHighJsx()
    } else if (flag == FLOW_CONTROL_3) {
        return sampleJsExpression()
    } else if (flag == FLOW_CONTROL_4) {
        return sampleHighJsxExpression()
    } else if (flag == FLOW_CONTROL_5) {
        return sampleJsxWithStyle()
    } else if (flag == FLOW_CONTROL_6) {
        return sampleJsxExegesis()
    } else if (flag == FLOW_CONTROL_7) {
        return sampleJsxArray()
    }
}

/**
 * 执行渲染
 * @param {标记} flag 
 */
function execRender(flag) {
    console.log("execRender flag = " + flag);
    ReactDOM.render(
        buildJsxObj(flag),
        document.getElementById('container')
    );
}

/**
 * 程序执行入口
 */
export function jsxMain() {
    execRender(FLOW_CONTROL_7);
}
